<script lang="ts" setup>
import { ref } from 'vue'

const currentCodIndex = ref(0)
const currentOrderBy = ref<string>('default')

const filter = (index: number) => {
 currentCodIndex.value = index

}

const orderBy = (type: string) => {
  currentOrderBy.value = type
}


</script>
<template>
  <div class="comment-container">
    <div class="filter-box">
      <div class="filter-box-left flex-row">
        <div :class="['filter-cond', currentCodIndex === 0 ? 'active' : '']" @click="filter(0)">全部</div>
        <div :class="['filter-cond', currentCodIndex === 1 ? 'active' : '']" @click="filter(1)">有图/视频</div>
        <div :class="['filter-cond', currentCodIndex === 2 ? 'active' : '']" @click="filter(2)">追评</div>
      </div>
      <div class="filter-box-right flex-row">
        <div class="show-type">{{ currentOrderBy === 'default' ? '默认排序' : '时间排序' }}</div>
        <div class="types">
          <div class="filter-sort" @click="orderBy('default')">默认排序</div>
          <div class="filter-sort" @click="orderBy('time')">时间排序</div>
        </div>
      </div>
    </div>
    <div class="comment-list">
      <div class="comment-item">
        <div class="root-comment-container">
          <div class="user-avatar">
            <div class="avatar">
              <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
            </div>
          </div>
          <div class="content-wrap">
            <div class="user-info">
              <div class="user-name">YourLife_001</div>
            </div>
            <div class="root-comment">
              <span class="comment-content-container root-comment">
                <span class="comment-content">
                  商品收到了，质量非常好，真是一个值得推荐的平台
                </span>
              </span>
              <div class="comment-info">
                <span class="comment-time">2024-06-03</span>
                <span class="comment-like"
                  ><i class="iconfont icon-like"></i>123</span
                >
                <span class="comment-dislike"
                  ><i class="iconfont icon-dislike"></i>123</span
                >
                <span class="comment-reply">回复</span>
                <div class="comment-operation-wrap">
                  <div class="comment-operation">
                    <i class="iconfont icon-gongyepin"></i>
                    <ul class="operation-list">
                      <li class="operation-option">
                        <span class="option-title">加入黑名单</span>
                      </li>
                      <li class="operation-option">
                        <span class="option-title">举报</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sub-comment-container">
          <div class="sub-comment-list">
            <div class="sub-comment-item">
              <div class="sub-user-info">
                <div class="sub-comment-avatar">
                  <div class="avatar">
                    <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
                  </div>
                </div>
                <div class="sub-user-name">YourLife_002</div>
              </div>
              <span class="comment-content-container sub-comment-content">
                <span class="comment-content"> What can I say? </span>
              </span>
              <div class="sub-comment-info">
                <span class="sub-comment-time">2024-0-6-03</span>
                <span class="sub-comment-like"
                  ><i class="iconfont icon-like"></i>123</span
                >
                <span class="sub-comment-dislike"
                  ><i class="iconfont icon-dislike"></i>123</span
                >
                <span class="sub-comment-reply">回复</span>
                <div class="sub-comment-operation-wrap">
                  <div class="comment-operation">
                    <i class="iconfont icon-gongyepin"></i>
                    <ul class="operation-list">
                      <li class="operation-option">
                        <span class="option-title">加入黑名单</span>
                      </li>
                      <li class="operation-option">
                        <span class="option-title">举报</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="sub-comment-item">
              <div class="sub-user-info">
                <div class="sub-comment-avatar">
                  <div class="avatar">
                    <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
                  </div>
                </div>
                <div class="sub-user-name">YourLife_001</div>
              </div>
              <span class="comment-content-container sub-comment-content">
                <span class="comment-content"
                  >回复&nbsp;<strong>@YourLife_002</strong>： 孩子，你无敌了
                </span>
              </span>
              <div class="sub-comment-info">
                <span class="sub-comment-time">2024-0-6-03</span>
                <span class="sub-comment-like"
                  ><i class="iconfont icon-like"></i>123</span
                >
                <span class="sub-comment-dislike"
                  ><i class="iconfont icon-dislike"></i>123</span
                >
                <span class="sub-comment-reply">回复</span>
                <div class="sub-comment-operation-wrap">
                  <div class="comment-operation">
                    <i class="iconfont icon-gongyepin"></i>
                    <ul class="operation-list">
                      <li class="operation-option">
                        <span class="option-title">加入黑名单</span>
                      </li>
                      <li class="operation-option">
                        <span class="option-title">举报</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-line"></div>
      </div>
      <div class="comment-item">
        <div class="root-comment-container">
          <div class="user-avatar">
            <div class="avatar">
              <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
            </div>
          </div>
          <div class="content-wrap">
            <div class="user-info">
              <div class="user-name">YourLife_001</div>
            </div>
            <div class="root-comment">
              <span class="comment-content-container root-comment">
                <span class="comment-content">
                  商品收到了，质量非常好，真是一个值得推荐的平台
                </span>
              </span>
              <div class="comment-info">
                <span class="comment-time">2024-06-03</span>
                <span class="comment-like"
                  ><i class="iconfont icon-like"></i>123</span
                >
                <span class="comment-dislike"
                  ><i class="iconfont icon-dislike"></i>123</span
                >
                <span class="comment-reply">回复</span>
                <div class="comment-operation-wrap">
                  <div class="comment-operation">
                    <i class="iconfont icon-gongyepin"></i>
                    <ul class="operation-list">
                      <li class="operation-option">
                        <span class="option-title">加入黑名单</span>
                      </li>
                      <li class="operation-option">
                        <span class="option-title">举报</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sub-comment-container">
          <div class="sub-comment-list">
            <div class="sub-comment-item">
              <div class="sub-user-info">
                <div class="sub-comment-avatar">
                  <div class="avatar">
                    <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
                  </div>
                </div>
                <div class="sub-user-name">YourLife_002</div>
              </div>
              <span class="comment-content-container sub-comment-content">
                <span class="comment-content"> What can I say? </span>
              </span>
              <div class="sub-comment-info">
                <span class="sub-comment-time">2024-0-6-03</span>
                <span class="sub-comment-like"
                  ><i class="iconfont icon-like"></i>123</span
                >
                <span class="sub-comment-dislike"
                  ><i class="iconfont icon-dislike"></i>123</span
                >
                <span class="sub-comment-reply">回复</span>
                <div class="sub-comment-operation-wrap">
                  <div class="comment-operation">
                    <i class="iconfont icon-gongyepin"></i>
                    <ul class="operation-list">
                      <li class="operation-option">
                        <span class="option-title">加入黑名单</span>
                      </li>
                      <li class="operation-option">
                        <span class="option-title">举报</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="sub-comment-item">
              <div class="sub-user-info">
                <div class="sub-comment-avatar">
                  <div class="avatar">
                    <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
                  </div>
                </div>
                <div class="sub-user-name">YourLife_001</div>
              </div>
              <span class="comment-content-container sub-comment-content">
                <span class="comment-content"
                  >回复&nbsp;<strong>@YourLife_002</strong>： 孩子，你无敌了
                </span>
              </span>
              <div class="sub-comment-info">
                <span class="sub-comment-time">2024-0-6-03</span>
                <span class="sub-comment-like"
                  ><i class="iconfont icon-like"></i>123</span
                >
                <span class="sub-comment-dislike"
                  ><i class="iconfont icon-dislike"></i>123</span
                >
                <span class="sub-comment-reply">回复</span>
                <div class="sub-comment-operation-wrap">
                  <div class="comment-operation">
                    <i class="iconfont icon-gongyepin"></i>
                    <ul class="operation-list">
                      <li class="operation-option">
                        <span class="option-title">加入黑名单</span>
                      </li>
                      <li class="operation-option">
                        <span class="option-title">举报</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-line"></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.comment-container {
  width: 100%;
  .filter-box {
    display: flex;
    line-height: 20px;
    padding: 10px 0;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
    .filter-cond {
      height: 20px;
      width: 96px;
      padding: 10px;
      font-size: 14px;
      text-align: center;
      border-radius: 25px;
      cursor: pointer;
      &.active {
        background-color: #ff4400;
        color: #fff;
      }
    }
    .filter-box-left {
      margin-bottom: 10px;
    }
    .filter-box-right {
      position: relative;
      .show-type {
        height: 20px;
        line-height: 20px;
        padding: 10px 20px;
        border-radius: 25px;
        cursor: pointer;
        background-color: #e0e0e0;
      }
      .types {
        background-color: #fff;
        display: none;
        position: absolute;
        width: 100%;
        top: 105%;
        left: 50%;
        padding: 10px;
        z-index: 300;
        cursor: pointer;
        border-radius: 10px;
        transform: translateX(-50%);
        box-shadow: 0 0 2px rgba(0, 0, 0, .3);
      }
      .filter-sort {
        border-radius: 10px;
        line-height: 30px;
        text-align: center;
        &:hover {
          color: #ff4400;
          background-color: #e0e0e0;
        }
      }
      &:hover .types {
        display: block;
      }
    }
  }
  .comment-item {
    position: relative;
    .user-avatar {
      width: 80px;
      height: 40px;
      display: flex;
      justify-content: center;
      position: absolute;
      left: 0;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .user-info {
      margin-bottom: 4px;
    }
    .root-comment-container {
      padding: 22px 0 0 80px;
    }
    .root-comment {
      line-height: 24px;
      padding: 2px 0;
    }
    .comment-info {
      display: flex;
      align-items: center;
      position: relative;
      margin-top: 2px;
    }
    .comment-time,
    .comment-like,
    .comment-dislike {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
      margin-right: 20px;
    }
    .comment-like,
    .comment-dislike {
      cursor: pointer;
    }
    .comment-operation-wrap {
      position: absolute;
      right: 20px;
      display: none;
    }
    .sub-comment-container {
      padding-left: 72px;
    }
    .sub-user-info {
      display: inline-flex;
      align-items: center;
      margin-right: 9px;
      line-height: 24px;
      vertical-align: baseline;
      white-space: nowrap;
    }
    .sub-comment-item {
      position: relative;
      padding: 8px 0 8px 42px;
      border-radius: 4px;
    }
    .sub-comment-avatar {
      position: absolute;
      left: 8px;
      cursor: pointer;
      .avatar {
        width: 24px;
        height: 24px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
    .sub-comment-info {
      display: flex;
      align-items: center;
      position: relative;
      margin-top: 2px;
      font-size: 13px;
    }
    .comment-content {
      line-height: 24px;
    }
    .sub-comment-time,
    .sub-comment-like,
    .sub-comment-dislike {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
      margin-right: 20px;
    }
    .sub-comment-operation-wrap {
      position: absolute;
      right: 40px;
      opacity: 0;
    }
    .bottom-line {
      margin-left: 80px;
      border-bottom: 1px solid #d9d9d9;
      margin-top: 14px;
    }
    &:last-child .bottom-line {
      display: none;
    }
  }
}

@media screen and (max-width: 440px) {
  .comment-container .comment-item .root-comment-container {
    padding: 22px 0 0 70px;
  }
  .comment-container .comment-item .user-avatar {
    width: 70px;
  }
  .comment-container .comment-item .sub-comment-container {
    padding-left: 62px;
  }
}

@media screen and (max-width: 425px) {
  .comment-container .comment-item .root-comment-container {
    padding: 22px 0 0 60px;
  }
  .comment-container .comment-item .user-avatar {
    width: 60px;
  }
  .comment-container .comment-item .sub-comment-container {
    padding-left: 52px;
  }
}
</style>
